<!DOCTYPE html>
<html>
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/bootstrap-theme.min.css" rel="stylesheet">
	<link rel="stylesheet" href="animate.min.css">
	<script src="../jquery/jquery-1.12.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="../scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
    <link href="../scrollbar/jquery.mCustomScrollbar.css" rel="stylesheet" />
	<style>
		.left{
			width: 145px;
			position: absolute;
			float: left;
			margin: 0;
		}
		.right{
			margin-left: 145px;
			position: relative;
		}
		body{
			font-family: Microsoft YaHei;
		}
		.leftMenu
		{
			width:100%;height:106px;
			
			text-align: center;cursor: pointer;
		}
		.topBtn
		{
			float: right;
			width: 100px;
			text-align:center;
			margin-top: 18px;
			cursor: pointer;
		}
		.menu-click
		{
			background-color:#e5f6fe;
  			border-left:3px solid #03a9f4;
		}
	</style>
  </head>
  <body style="overflow-x: hidden;">
	<div class="container-fluid" style="height:100px;background-color:#03a9f4;">
		<div style="float: left;line-height: 100px;">
			<img src="../images/top_logo.png">
		</div>
		<div class="topBtn">
			<img src="../images/btn_quit.png">
			<br>
			<font style="font-size: 18px;color: white;">退出系统</font>
		</div>
		<div class="topBtn">
			<img src="../images/bth_adminstrator.png">
			<br>
			<font style="font-size: 18px;color: white;">管理员</font>
		</div>
		<div style="line-height: 100px;float: right;color: white;font-size: 16px;">
			<marquee id="welcom" scrollamount="3" direction="left">欢迎您，user1</marquee>
		</div>
    </div>

	<div id="leftDiv" class="left" style="height:600px;">
		<div style="width:100%;height:24px;background-color: #e5f6fe;">
			<img id="leftMoveBtn" src="../images/menu_on.png" style="vertical-align: middle;margin-left: 85%;cursor: pointer;">
		</div>
		
		<div class="leftMenu" style="margin-top: 8px;">
			<img src="../images/ico_user-contro_prl.png" style="margin-top: 30px;"/>
			<div>用户管理</div>
		</div>
		
		<div class="leftMenu">
			<img src="../images/ico_user-contro_prl.png" style="margin-top: 30px;"/>
			<div>用户管理</div>
		</div>
		
		<div class="leftMenu">
			<img src="../images/ico_user-contro_prl.png" style="margin-top: 30px;"/>
			<div>用户管理</div>
		</div>
		
		<div class="leftMenu">
			<img src="../images/ico_user-contro_prl.png" style="margin-top: 30px;"/>
			<div>用户管理</div>
		</div>
		
		<div class="leftMenu">
			<img src="../images/ico_user-contro_prl.png" style="margin-top: 30px;"/>
			<div>用户管理</div>
		</div>
		
	</div>

	<div id="rightDiv" class="right animated fadeInRight" style="height:600px;background-color:blue;">
				      <iframe  src="" width="100%" height="100%" align="top" frameborder="0" scrolling="auto" marginwidth="0" marginheight="0" border="0" allowtransparency="true" id="iframeBody"></iframe>

	</div>
  </body>
  <script type="text/javascript">
  	(function($){
		$(window).load(function(){
			$("#content_1").mCustomScrollbar({
				scrollButtons:{
					enable:true,
					scrollType:"continuous",
					scrollAmount:40
				},
				autoHideScrollbar:true,
				scrollInertia:100
			});
		});
	})(jQuery);
  	
  	$("#leftMoveBtn").click(function(){
  		$("#rightDiv").width($("#rightDiv").width()+115);
  	    $("#rightDiv").animate({left:'-115px'}, "slow",function(){
  		  
  		  var leftBar = document.createElement('div');
  		  leftBar.id = "leftBar";
  		  leftBar.innerHTML = "<div id='rightMoveBtn' style='font-weight:bold;cursor:pointer;text-align:center'> <img src='../images/menu_off.png'/> </div>";
  		  document.body.appendChild(leftBar);
  		  $("#leftBar").width(30);
  		  $("#leftBar").height(600);
  		  $("#leftBar").css("background-color","#e5f6fe");
  		  $("#leftBar").css("position","absolute");
  		  $("#leftBar").css("left","0px");
  		  $("#leftBar").css("top","100px");
  		  
  		  $("#rightMoveBtn").on("click",function(){
  			  $("#leftBar").remove();
	 		  $("#rightDiv").animate({left:'+0px'}, "slow",function(){
	 			 $("#rightDiv").width($("#rightDiv").width()-115);
	  		  });
  		  });
  	  });
  	});
  	
  	$(".leftMenu").on("click",function(){
  		$(".leftMenu").each(function(){
  			$(this).removeClass("menu-click");
  		});
  		$(this).addClass("menu-click");
  	});
  	
  	$('#iframeBody').attr('src',"pages/main/back/UserManager.jsp");

  	
  </script>
</html>